<template>
  <main>
  <div class="null404">
    <p>
      <span v-for="s in code" :key="s">{{s}}</span>
    </p>
    <h3 v-if="error.statusCode != 406">遇到一个小问题啦(´･ω･`)</h3>
    <h3 v-else>请尝试刷新！！！</h3>
  </div>
</main>
</template>

<script>
export default {
  name: "EmptyLayout",
  layout: "empty",
  props: {
    error: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      pageNotFound: "404 Not Found",
      otherError: "An error occurred",
    };
  },
  head() {
    const title =
      this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
    return {
      title,
    };
  },
  computed:{
    code(){
      return this.error.statusCode+''
    }
  },
};
</script>

<style scoped>
h1 {
  font-size: 20px;
  text-align: center;
  padding: 4em 0;
}
</style>
